@import (reference) "djblets/css/datagrid.less";
@import (reference) "rb/css/defs.less";
@import (reference) "rb/css/ui/boxes.less";
@import (reference) "rb/css/ui/content-header.less";


#rb-ns-ui() {
  .datagrids() {
    @_boxes-vars: #rb-ns-ui.boxes();

    @bg: @_boxes-vars[@bg];
    @border-color: @_boxes-vars[@border-color];
    @border-radius: @_boxes-vars[@border-radius];
    @box-shadow: @_boxes-vars[@shadow];

    .actions() {
      @_boxes-vars: #rb-ns-ui.boxes();

      @bg: #EEEEEE;
      @border-radius: @_boxes-vars[@inner-border-radius];
      @box-shadow: @_boxes-vars[@shadow];
      @text-color: #555555;

      @padding: 8px;
      @offset-left: 1em;
      @offset-top: 4em;
      @offset-bottom: 3.8em;
    }

    .cells() {
      /* Subclass the Djblets definitions. */
      #djblets-ns-ui.datagrids.cells();

      @padding: 5px;

      @even-bg: #FBFBFB;
      @row-divider-color: #F0F0F0;
    }

    .header() {
      /* Subclass the Djblets definitions. */
      #djblets-ns-ui.datagrids.header();

      @bg: #rb-ns-ui.colors[@blue-70];
    }

    .filter-menu() {
      @_boxes-vars: #rb-ns-ui.boxes();

      @bg: #FFFFE0;
      @border-color: darken(@bg, 65%);
      @border-radius: @_boxes-vars[@border-radius];
    }

    .paginator() {
      /* Subclass the Djblets definitions. */
      #djblets-ns-ui.datagrids.paginator();

      @bg: #EEEEEE;
      @border-color: #BBBBBB;
    }

    .ship-it-indicator() {
      @_colors: #rb-ns-ui.colors();

      @border-color: @shipit-border-color;
      @text-color: @shipit-text-color;
      @bg-color-1: @shipit-bg;
      @bg-color-2: darken(@shipit-bg, 8%);

      @stale-border-color: @_colors[@grey-40];
      @stale-text-color: @_colors[@black];
      @stale-bg-color-1: @_colors[@grey-70];
      @stale-bg-color-2: darken(@stale-bg-color-1, 8%);
    }
  }
}


/*
 * Applies to the body tag, and prepares the page for a datagrid that can
 * fit the contents of the page.
 */
body.datagrid-page {
  @_datagrid-vars: #rb-ns-ui.datagrids();

  #page-container {
    #content {
      table:after {
        clear: both;
      }

      .datagrid-body-container {
        overflow-y: auto;
      }

      .datagrid-wrapper {
        height: 100%;
      }

      .main {
        padding: 0;
      }
    }
  }
}

.datagrid {
  @_cells-vars: #rb-ns-ui.datagrids.cells();
  @_datagrid-vars: #rb-ns-ui.datagrids();

  tr {
    &,
    &:hover {
      background: @_cells-vars[@bg];
    }

    &.even {
      &,
      &:hover {
        background: @_cells-vars[@even-bg];
      }
    }
  }

  tbody {
    td, th {
      border-bottom: 1px @_cells-vars[@row-divider-color] solid;
      padding: @_cells-vars[@padding];
      vertical-align: middle;

      &:last-child {
        border-right: 0 !important;
      }
    }

    tr:first-child {
      td, th {
        border-top: 0 !important;
      }
    }

    tr {
      background: @_datagrid-vars[@bg];

      .on-mobile-medium-screen-720({
        &.even th:first-child {
          background: #E3E3E3;
        }

        &.odd th:first-child {
          background: #EEE;
        }

        td, th {
          padding-top: 10px;
          border-bottom-width: 2px;
        }

        th:first-child {
          border-right: 1px #CCC solid;
          border-bottom: 0;
          font-weight: normal;
          color: #444;
          padding-left: 10px;
        }

        &.mobile-only-row {
          td, th {
            padding-top: @_cells-vars[@padding];
          }
        }
      });
    }
  }

  td,
  th {
    text-align: left;

    tbody a {
      &,
      &:link,
      &:visited {
        color: @link-color;
      }
    }
  }
}

.datagrid-body-container {
  background: #rb-ns-ui.datagrids[@bg];
}

/*
 * Give both the fixed header table and the (eventually) hidden headers
 * row in the body table a matching background and border style.
 */
.datagrid-head,
.datagrid-body .datagrid-headers {
  @_datagrid-vars: #rb-ns-ui.datagrids();
  @_header-vars: #rb-ns-ui.datagrids.header();

  background: @_header-vars[@bg];
  border-bottom: 1px @_datagrid-vars[@border-color] solid;
  border-radius: @_datagrid-vars[@border-radius]
                 @_datagrid-vars[@border-radius]
                 0 0;
}

.datagrid-headers {
  border-collapse: collapse;
  border-spacing: 0;
  overflow: hidden;
}

.datagrid-header {
  @_datagrid-vars: #rb-ns-ui.datagrids();

  /* Add rounded corners to the top-left and top-right of the header. */
  &:first-child {
    border-top-left-radius: @_datagrid-vars[@border-radius];
  }

  &:last-child {
    border-top-right-radius: @_datagrid-vars[@border-radius];
  }

  a {
    color: inherit;
  }

  .rb-icon-datagrid-column-shipits-issues {
    margin-left: 4px;
  }
}

.datagrid-main {
  @_datagrid-vars: #rb-ns-ui.datagrids();

  border: 1px @_datagrid-vars[@border-color] solid;
  border-radius: @_datagrid-vars[@border-radius];
  box-shadow: @_datagrid-vars[@box-shadow];
  box-sizing: border-box;
  overflow: hidden;
  z-index: @z-index-base;
}

.datagrid-menu {
  @_datagrid-vars: #rb-ns-ui.datagrids();

  /*
   * Override the Edit Columns menu to only show a border on the left.
   * The menu should be flush with the top, bottom, and right of the
   * table.
   */
  border: 0;
  border-left: 1px @_datagrid-vars[@border-color] solid;
  margin-top: 1px;

  /*
   * Override the default style for the "checkboxes" to not show a border.
   * The actual checkmarks will be indication enough.
   *
   * Note that we still retain a faint hover style, showing a light grey
   * box where the checkbox is.
   */
  .datagrid-menu-checkbox {
    border: 0;
  }
}

.datagrid-title-tabs {
  @_datagrid-vars: #rb-ns-ui.datagrids();
  @_header-vars: #rb-ns-ui.datagrids.header();

  display: inline-block;
  list-style: none;

  /*
   * Position the tabs immediately above the header, so that the active
   * tab can sit directly on top of the border.
   */
  margin: 0 0 0 4em;
  padding: 0;
  position: relative;
  vertical-align: middle;
  z-index: @z-index-deco;

  .datagrid-tab {
    background: white;
    border: 1px @_datagrid-vars[@border-color] solid;
    border-right-width: 0;
    float: left;
    padding: 0;

    /*
     * Position the bottom of the tab so it's sitting right on the header's
     * border. We'll then turn off the border for the active tab below,
     * so it's flush with the header.
     */
    margin: 0 0 -1px 0;

    &:first-child {
      border-top-left-radius: @_datagrid-vars[@border-radius];
    }

    &:last-child {
      border-top-right-radius: @_datagrid-vars[@border-radius];
      border-right-width: 1px;
    }

    &.active {
      background: @_header-vars[@bg];
      border-bottom-color: transparent;
    }

    a {
      color: black;
      display: inline-block;
      font-size: 110%;
      text-decoration: none;
      padding: 0.8em 1em;
    }
  }

  .datagrid-showclosed, .datagrid-showarchived {
    padding: 2px 0 0 10px;
  }
}

.datagrid-wrapper {
  @_datagrid-vars: #rb-ns-ui.datagrids();
  @_filter-menu-vars: #rb-ns-ui.datagrids.filter-menu();
  @_paginator-vars: #rb-ns-ui.datagrids.paginator();

  .datagrid-titlebox {
    /* Turn off the default styles from Djblet's datagrid stylesheet. */
    background: none;
    border-bottom: 0;

    /*
     * Set the titlebox to be aligned properly with any content that
     * comes immediately before it in .datagrid-main. This may be tabs,
     * for instance.
     */
    display: inline-block;
    margin: 1em 0.5em;
    padding: 0;
    vertical-align: middle;

    .datagrid-title {
      background: transparent;
      border-bottom: 0;
      color: #444;
      text-transform: uppercase;
    }
  }

  .datagrid-top-filters {
    @_content-header-vars: #rb-ns-ui.content-header();

    display: inline-block;
    top: -@_content-header-vars[@spacing];
    right: 0;

    a {
      color: @link-color;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    .datagrid-filters {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .datagrid-filters-menu {
      .mobile-only();

      border: 1px transparent solid;
      border-bottom: 0;
      position: relative;
      text-align: center;
      padding: @_content-header-vars[@spacing];

      .fa {
        color: #333;
        font-size: 1.5em;
      }
    }

    .on-mobile-medium-screen-720({
      position: absolute;
      right: 0;

      &:hover {
        .datagrid-filters {
          opacity: 1;
          visibility: visible;


          /* Overlap the border of the action. */
          margin-top: -1px;
        }

        .datagrid-filters-menu {
          background: @_filter-menu-vars[@bg];
          border-color: @_filter-menu-vars[@border-color];
          border-radius: @_filter-menu-vars[@border-radius]
                         @_filter-menu-vars[@border-radius]
                         0 0;
          transition: 0.1s border-color linear, 0.1s background linear;
          z-index: (@z-index-menu + 1);
        }
      }

      .datagrid-filters {
        background: @_filter-menu-vars[@bg];
        border: 1px @_filter-menu-vars[@border-color] solid;
        border-radius: @_filter-menu-vars[@border-radius]
                       0
                       @_filter-menu-vars[@border-radius]
                       @_filter-menu-vars[@border-radius];
        opacity: 0;
        position: absolute;
        right: 0;
        transition: 0.1s opacity linear;
        visibility: hidden;
        z-index: @z-index-menu;

        li {
          white-space: nowrap;

          a {
            color: black;
            display: block;
            padding: 1em;

            &:hover {
              text-decoration: none;
            }
          }
        }
      }
    });
  }

  .paginator {
    background: @_paginator-vars[@bg];
    border-radius: 0 0
                   @_datagrid-vars[@border-radius]
                   @_datagrid-vars[@border-radius];
    border-top: 1px @_paginator-vars[@border-color] solid;
    padding: 0 0 0 1em;

    a:hover {
      background: none;
      color: black;
    }

    a, span {
      display: inline-block;
    }

    a, .current-page {
      border: 0;
      color: #999;
      font-weight: bold;
      min-width: 1em;
      text-align: center;
    }

    a,
    .current-page,
    .page-count {
      padding: 0.7em;
    }

    .current-letter {
      background: none;
      border: 0;
      padding: 0;
    }

    .current-letter,
    .current-page {
      background: none;
      color: black;
    }

    .current-page {
      border-bottom: 3px #777 solid;
    }

    .page-count {
      color: #666;
      font-weight: normal;
      padding-left: 0;
      padding-right: 0;
    }
  }
}


/*
 * Set some common styles for the datagrid header cells.
 *
 * Borders will be turned off by default and the background will match that
 * of the header. When a header is being dragged, the left and right borders
 * will turn on again, to help provide a guide as to boundaries of the
 * column.
 */
#page-container .datagrid-header,
.datagrid-header-drag.datagrid-header {
  background: #rb-ns-ui.datagrids.header()[@bg];
  border: 0;
}

.datagrid-header-drag.datagrid-header {
  border: 1px #rb-ns-ui.datagrids.header[@border-color] solid;
  border-top: 0;
  border-bottom: 0;
  z-index: @z-index-deco;
}

.edit-columns .fa-spinner {
  font-size: 16px;
  text-align: center;
}


/****************************************************************************
 * Formal datagrid components
 ****************************************************************************/

/**
 * Page header for a datagrid.
 *
 * This builds upon the ``.rb-c-content-header`` component to offer support
 * for tabs.
 *
 * Tab support currently requires use of the ``.datagrid-title-tabs`` class,
 * which does not meet our current component styles.
 *
 * Modifiers:
 *     -has-tabs:
 *         The header has tabs. This will remove the padding at the bottom
 *         of the header, allowing tabs to be flush.
 *
 * Structure:
 *     <header class="rb-c-datagrid-header rb-c-content-header -is-main">
 *      <h1 class="rb-c-content-header__title">...</h1>
 *      <div class="rb-c-content-header__actions">...</div>
 *     </header>
 *
 *     <header class="rb-c-datagrid-header rb-c-content-header -is-main
 *                    -has-tabs">
 *      <ul class="datagrid-title-tabs">...</ul>
 *      <div class="rb-c-content-header__actions">...</div>
 *     </header>
 */
.rb-c-datagrid-header {
  &.-has-tabs {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}


/****************************************************************************
 * Column-specific styles
 ****************************************************************************/
#page-container .datagrid {
  .age1 {
    background-color: #beedbc;
    border: 1px #8bbd5c solid !important;
    white-space: nowrap;
  }

  tr.even .age1 {
    background-color: #b4e3b2;
  }

  .age2 {
    background-color: #ddfa8e;
    border: 1px #a3e266 solid !important;
    white-space: nowrap;
  }

  tr.even .age2 {
    background-color: #d3f084;
  }

  .age3 {
    background-color: #fdf18c;
    border: 1px #d8c158 solid !important;
    white-space: nowrap;
  }

  tr.even .age3 {
    background-color: #f3e782;
  }

  .age4 {
    background-color: #fed3a9;
    border: 1px #d49659 solid !important;
    white-space: nowrap;
  }

  tr.even .age4 {
    background-color: #f4c99f;
  }

  .age5 {
    background-color: lighten(#fab6b6, 3%);
    border: 1px lighten(#f56363, 10%) solid !important;
    white-space: nowrap;
  }

  tr.even .age5 {
    background-color: lighten(#f0acac, 3%);
  }

  td.bugs {
    cursor: text;

    a.bug {
      text-decoration: underline;
      color: @link-color;
    }

    .bug {
      white-space: nowrap;
    }
  }

  .diff-size-column {
    font-size: 90%;

    &.delete {
      color: @diff-delete-line-count-color;
    }

    &.insert {
      color: @diff-insert-line-count-color;
    }
  }

  .month {
    background-color: #E9E9E9;
  }

  .issue-count-container,
  .shipit-count-container {
    border-radius: 10px;
    display: inline-block;
    font-weight: bold;
    overflow: hidden;
    vertical-align: bottom;
    white-space: nowrap;
  }

  .issue-count,
  .issue-verifying-count,
  .shipit-count {
    display: inline-block;
    padding: 0.05em 0.8em;
    vertical-align: bottom;
  }

  .issue-count + .issue-verifying-count {
    padding-left: 0;
  }

  .issue-count-container {
    border: 1px darken(@issue-opened-bg, 50%) solid;
    color: #205003;
    #gradient > .vertical-three-colors(@issue-opened-bg, @issue-opened-bg, 25%,
                                       darken(@issue-opened-bg, 30%));

    .rb-icon-datagrid-open-issues {
      margin: 2px 3px 2px 0;
    }

    .rb-icon-datagrid-issue-verifying {
      margin: 0 3px 0 0;
    }
  }

  .shipit-count-container {
    @_indicator-colors: #rb-ns-ui.datagrids.ship-it-indicator();

    border: 1px @_indicator-colors[@border-color] solid;
    color: @_indicator-colors[@text-color];
    #gradient > .vertical-three-colors(
      @_indicator-colors[@bg-color-1],
      @_indicator-colors[@bg-color-1],
      25%,
      @_indicator-colors[@bg-color-2]);

    &.-is-stale {
      border-color: @_indicator-colors[@stale-border-color];
      #gradient > .vertical-three-colors(
        @_indicator-colors[@stale-bg-color-1],
        @_indicator-colors[@stale-bg-color-1],
        25%,
        @_indicator-colors[@stale-bg-color-2]);
    }

    .rb-icon-datagrid-shipit {
      margin: 1px 4px 1px 0;
    }
  }

  .repository-column,
  .submitter-column {
    white-space: nowrap;
  }

  .submitter-column {
    padding-top: 0;
    padding-bottom: 0;
  }

  .summary {
    cursor: pointer;
    position: relative;

    .no-summary {
      color: #888;
      font-style: italic;
    }

    label {
      border-radius: 4px;
      display: inline;
      float: left;
      margin-right: 0.6em;
      padding: 0 4px;
      line-height: 1.4;

      &.label-draft {
        background: @summary-label-draft-bg;
        border: 1px @summary-label-draft-border-color solid;
        color: @summary-label-text-color;
      }

      &.label-submitted {
        background: @summary-label-submitted-bg;
        border: 1px @summary-label-submitted-border-color solid;
        color: @summary-label-submitted-text-color;
      }

      &.label-discarded {
        background: @summary-label-discarded-bg;
        border: 1px @summary-label-discarded-border-color solid;
        color: @summary-label-discarded-text-color;
      }

      &.label-archived {
        background: @summary-label-archived-bg;
        border: 1px @summary-label-archived-border-color solid;
        color: @summary-label-archived-text-color;
      }

      &.label-muted {
        background: @summary-label-muted-bg;
        border: 1px @summary-label-muted-border-color solid;
        color: @summary-label-muted-text-color;
      }
    }

    /*
     * The summary text.
     *
     * We're forcing this to be a block, and then setting overflow: hidden,
     * which, along with the float: left in the label above, will cause the
     * text to stay together and wrap as a cohesive block, without part of
     * the text wrapping below the label.
     *
     * Yes, CSS is weird.
     */
    span {
      display: block;
      overflow: hidden;
      line-height: 1.5;
    }
  }
}


/****************************************************************************
 * Styles for the User page
 ****************************************************************************/
.datagrid-page #user_page_profile {
  margin-bottom: 1em;
  text-align: center;

  .nickname {
    font-size: 1.4em;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .email, .group {
    color: #0000C0;
  }

  .fn, .email {
    font-size: 1.2em;
  }

  .logged-in {
    margin-top: 1.5em;
  }
}
